
import { ReactNode } from 'react';
import styled, { CSSProperties } from 'styled-components'
import IconBack from '../asserts/back_normal.svg'
import { useNavigate } from 'react-router-dom';

const NAVIGATION_HEIGHT = '44px';

const Container = styled.div<{ $background?: string }>`
    height: ${NAVIGATION_HEIGHT};
    display: flex;
    align-items: center;
    background: ${({ $background }) => $background};
`

const Left = styled.div`
    height: 100%;
    flex: 1;
`

const Right = styled.div`
    height: 100%;
    flex: 1;
    /* min-width: ${NAVIGATION_HEIGHT}; */
`

const Title = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 2;
    font-size: 18px;
    color: ${(prop) => prop.theme.text.title};
`

const Back = styled.div`
    height: ${NAVIGATION_HEIGHT};
    width: ${NAVIGATION_HEIGHT};
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
`
export interface NavigationBarProps {
    background?: string;
    leftItem?: ReactNode;
    rightItem?: ReactNode;
    title?: ReactNode;
    showBack?: boolean;
    back?: ReactNode;

    titleStyle?: CSSProperties;
    backIcon?: string;

    className?: string;
    onBack?: () => boolean
}

const NavigationBar: React.FC<NavigationBarProps> = ({ background, leftItem, rightItem, title, titleStyle, showBack, back, backIcon, onBack, className }) => {

    const navigate = useNavigate()
    const onBackClick = () => {
        if (!onBack || onBack?.()) {
            navigate(-1)
        }
    }

    return <Container
        $background={background}
        className={className}
    >
        <Left>
            {showBack && (back ||
                <Back onClick={onBackClick}>
                    <img
                        src={backIcon || IconBack}
                        alt="back"
                    />
                </Back>)}
            {leftItem}
        </Left>
        {title && <Title style={titleStyle}>{title}</Title>}
        <Right>{rightItem}</Right>
    </Container >
}

export default NavigationBar